<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变</title>
    <style>
        body {
            margin: 0 200px;
            /*position:relative;*/
        }

        div {
            width: 200px;
            height: 50px;
            margin: 10px 0;
            /*  结合使用元素内的文字居中 */
            text-align: center;
            line-height: 200px;
        }
        
        .linear-gradient {
            /*
                默认从上到下；
                度数:顺时针从0度开始即正方向上为0度。
            */
            background-image: linear-gradient(0deg, yellow, green);
        }

        /* 控制色条大小 */
        .toTopAndLeft  {
            background-image: linear-gradient(to left, yellow 50%, green 50%);
        }

        .divc3  {
            background-image: linear-gradient(to left, yellow 50%, green 40%, blue 60%);
        }

        .divc4  {
            background-image: linear-gradient(to left, yellow 50%, green 40%, blue 50%);
        }

        /* 径向渐变 */
        .divc5 {
            height: 200px;
            background-image: radial-gradient(red, yellow, green);
        }

        .divc6 {
            height: 200px;
            background-image: radial-gradient(red 10%, yellow 50%, green);
        }

        /* 重复渐变 */
        .divc7 {
            height: 200px;
            background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
        }

        .divc8 {
            height: 200px;
            background-image: repeating-linear-gradient(red, yellow 15%, green 15%);
        }
    </style>
</head>
<body>
    <header>线性渐变</header>
    <div class="linear-gradient"></div>
    <div class="toTopAndLeft"></div>
    <div class="divc3"></div>
    <div class="divc4"></div>
    <header>径向渐变</header>
    <div class="divc5"></div>
    <div class="divc6"></div>
    <header>重复渐变</header>
    <div class="divc7">径向</div>
    <div class="divc8">线性</div>
</body>
</html>